<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>登录/注册</title>
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/font.css">
		<link rel="stylesheet" type="text/css" href="css/madieer.css">
		<script type="text/javascript" src="js/w_rem.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/vue@3.2.37.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>
		<script type="text/javascript" src="js/wow.js"></script>
		<script type="text/javascript" src="js/jzt_common.js"></script>
		<script type="text/javascript" src="js/madieer.js"></script>
	</head>
	<body>
		<div id="form-app" v-cloak>
			<header-app></header-app>
			<div class="au-a3">
				<div class="au-a3-box wow fadeInUp animated" data-wow-delay="0.3s" data-wow-duration="1.5s"
					style="visibility: visible; animation-duration: 1.5s; animation-delay: 0.3s; animation-name: fadeInUp;">
					<div class="t1-a1" style="background:none;">
						<div class="t1-a2 i100 wow fadeInUp" data-wow-delay="0.3s" data-wow-duration="1.5s"
							style="visibility: hidden; animation-duration: 1s; animation-delay: 0.3s; animation-name: none;">
							<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220727/5d9ecea45467d2718d71ff37f12d7df1.jpg">
						</div>
						<div class="t1-a3 wow fadeInUp" data-wow-delay="0.4s" data-wow-duration="1.5s"
							style="visibility: hidden; animation-duration: 1s; animation-delay: 0.4s; animation-name: none;">
							{{ loginTab[loginStatus] }}</div>
					</div>
					<div class="au-a3-form">
						<div class="au-a3-form-b1">
							<div>
								<p>账号 Account <span>*</span></p>
								<input type="text" name="username" v-model="message.username">
							</div>
							<div>
								<p>密码 Password<span>*</span></p>
								<input type="password" name="pwd" v-model="message.pwd">
							</div>
						</div>
						<div v-if="loginStatus == 1">
							<div class="au-a3-form-b1">
								<div>
									<p>昵称 Nickname </p>
									<input type="text" name="nickname" v-model="message.nickname">
								</div>
								<div>
									<p>邮箱 Email</p>
									<input type="text" name="email" v-model="message.email">
								</div>
							</div>
							<div class="au-a3-form-b1">
								<div>
									<p>联系电话 Phone</p>
									<input type="text" name="phone" v-model="message.phone">
								</div>
								<div class="au-a3-form-b1">
									<div>
										<p>验证码 Code</p>
										<input type="text" name="phone" v-model="message.code">
									</div>
									<div>
										<p></p>
										<div style="width: 140px; height: 50px;margin-top:39px;cursor: pointer; line-height: 50px;text-align: center; background: #00584a; color: #fff; font-size: 16px; padding: 0 20px;" @click="getSmsCode">获取验证码</div>
									</div>
								</div>
							</div>
						</div>
						<div class="au-a3-form-sub clear">
							<input type="button" @click="submitMessage" :value="loginTab[loginStatus]">
							<div v-if="loginStatus == 0" @click="toRegister" style="float: left;line-height: 50px;margin-left: 20px;cursor: pointer;color: #409d8e;text-decoration: underline;">还没有账号？去注册</div>
							<div v-if="loginStatus == 1" @click="toLogin" style="float: left;line-height: 50px;margin-left: 20px;cursor: pointer;color: #409d8e;text-decoration: underline;">已有账号，去登录</div>
							<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220727/224466f3e13b9c6a67a9c85d5160ffe9.jpg" alt="">
						</div>
					</div>
					<div contenteditable="true" style="min-height: 200px;"></div>
				</div>
			</div>
		</div>
		<script src="components/headerApp.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.createApp({
				setup() {
					const loginTab = ['用户登录', '用户注册']
					let loginStatus = Vue.ref(0)
					let message = Vue.ref({});
					// 点击去注册
					const toRegister = () => {
						loginStatus.value = 1
						message.value = {}
					}
					// 点击去登录
					const toLogin = () => {
						loginStatus.value = 0
						message.value = {}
					}
					
					const submitMessage = () => {
						let api, data
						let base = new Base64();
						// var result = base.encode(str);
						if(loginStatus.value == 0) {
							// 登录
							api = 'https://jzt2.china9.cn/api/siteuser/login'
							if (!message.value.username) {
								alert("请输入账号");
								return
							} else if (!message.value.pwd) {
								alert("请输入密码");
								return
							} else {
								data = {
									site_id: '6352679462e52a19f57c2d06',
									username: message.value.username,
									pwd: message.value.pwd,
								}
							}
						}
						if(loginStatus.value == 1) {
							// 注册
							api = 'https://jzt2.china9.cn/api/siteuser/register'
							if (!message.value.username) {
								alert("请输入账号");
								return
							} else if (!message.value.pwd) {
								alert("请输入密码");
								return
							} else if(!message.value.code) {
								alert("请输入验证码");
								return
							} else {
								data = {
									site_id: '6352679462e52a19f57c2d06',
									username: message.value.username,
									pwd: message.value.pwd,
									nickname: message.value.nickname,
									email: message.value.email,
									phone: message.value.phone,
									code: message.value.code
								}
							}
						}
						data = JSON.stringify(data)
						data = base.encode(data)
						data = { data: data }
						$.post(api, data, function(res) {
							if (res.code === 200) {
								alert(res.msg);
								if(loginStatus.value == 0) {
									window.localStorage.setItem('userInfo', JSON.stringify(res.data))
								}
								message.value = {}
							} else {
								alert(res.msg);
								console.log(res.msg);
							}
						})
					};
					// 获取验证码
					const getSmsCode = () => {
						var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;    //11位手机号码正则
						if(!message.value.phone) {
							alert('请输入手机号');
							return;
						}
						if(!reg_tel.test(message.value.phone)) {
							alert('请输入正确的手机号');
							return;
						}
						$.post('https://jzt2.china9.cn/api/sendsms/send', {
							phone: message.value.phone,
							site_id: '6352679462e52a19f57c2d06',
							sms_id: '6389921ef4bb3e09e603e0d0'
						}, function(res) {
							if (res.code === 200) {
								console.log(res);
								alert(res.msg);
							} else {
								alert(res.msg);
								console.log(res.msg);
							}
						})
					}
					Vue.onMounted(() => {})
					return {
						loginTab,
						loginStatus,
						message,
						submitMessage,
						toRegister,
						toLogin,
						getSmsCode
					}
				}
			}).component(
				// 注册的名字
				'HeaderApp',
				// 组件的实现
				headerApp
			).mount('#form-app')
		</script>
	</body>
</html>